<template>
    <el-upload v-model:file-list="fileList" class="upload-demo" :action="props.action" :multiple="props.multiple"
        :on-success="handleSuccess" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="props.limit"
        :on-change="handleChange" :on-error="handleError" :before-upload="beforeUpload" ref="uploadRef"
        :auto-upload="props.autoUpload" :on-exceed="handleExceed">
        <el-button type="primary">{{ props.text }}</el-button>
        <template #tip v-if="props.isShowTip">
            <div class="el-upload__tip"> {{ uploadTip }}</div>
        </template>
    </el-upload>
</template>
<script lang="ts" setup>
import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, ElUpload, UploadFile, UploadFiles } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'
import { IHomeState } from '@/store/models/Home/types'
import { useStore } from 'vuex'

const props = defineProps({
    action: {
        type: String,
        default: 'https://localhost:8080/upload',
    },
    limit: {
        type: Number,
        default: 1,
    },
    multiple: {
        type: Boolean,
        default: false,
    },
    autoUpload: {
        type: Boolean,
        default: false,
    },
    method: {
        type: String,
        default: 'post',
    },
    fileSize: {
        type: Number,
        default: 2, // MB
    },
    isShowTip: {
        type: Boolean,
        default: false,
    },
    text: {
        type: String,
        default: 'Click to upload',
    },
})
const store = useStore()
const { emit } = getCurrentInstance()
const fileList = ref<UploadUserFile[]>()
const uploadRef = ref<InstanceType<typeof ElUpload>>()
const uploadTip = `jpg/png files with a size less than ${props.fileSize}MB.`
const successRes = ref('')
const handleSuccess: UploadProps['onSuccess'] = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    successRes.value = response
    // console.log('success', response, uploadFile, uploadFiles)
}
const handleError: UploadProps['onError'] = (err, uploadFile, uploadFiles) => {
    // console.log(err, uploadFile, uploadFiles)
    ElMessage.error(`Upload failed: ${err.message}`)
}
const handleChange: UploadProps['onChange'] = (file: UploadFile, uploadFiles: UploadFiles) => {
    // console.log(file, uploadFiles)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    // 最大限制错误提示
    ElMessage.warning(`The maximum number of files is ${props.limit}`)
}

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    // console.log(file, uploadFiles)
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}
const beforeUpload = (file: File) => {
    const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
    if (!isJPGOrPNG) {
        ElMessage.error('Only JPG/PNG files can be uploaded')
        return false
    }
    // 最大限制
    const isLt2M = file.size / 1024 / 1024 < props.fileSize
    if (!isLt2M) {
        ElMessage.error(`The size of the file must be less than ${props.fileSize}MB`)
        return false
    }
    return true;
}
watch(() => successRes.value, (val) => {
    if (val) {
        store.state.admin.websiteManagement.home.nav.logo = val['url']
    }
})
const uploadFiles = () => {
    uploadRef.value?.submit()
}
defineExpose({
    uploadFiles,
})
</script>
  